<template>

  <div class="task-manager" @scroll="handleScroll">
    <SearchBar></SearchBar>
    <div class="content" @scroll="handleScroll">
              <div v-if="showProcessView" class="process-view" >
              <RecycleScrollerView></RecycleScrollerView>
              </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import  {inject } from 'vue';

const isCollapsed = ref(true);
const processSelected = ref(true);
const performanceSelected = ref(false);
const showProcessView = ref(true);
const showPerformanceView = ref(false);
import SearchBar from "./SearchBar.vue";
import RecycleScroller from "./RecycleScrollerView.vue";
import RecycleScrollerView from "./RecycleScrollerView.vue";
import GridProcessView from "./GridProcessView.vue";

// 防止滚动穿透 content 元素
const handleScroll = (event) => {
  event.stopPropagation(); // 阻止事件冒泡
  event.preventDefault()
};

const toggleProcess = () => {
  processSelected.value = true;
  performanceSelected.value = false;
  showProcessView.value = true;
  showPerformanceView.value = false;
};
const togglePerformance = () => {
  processSelected.value = false;
  performanceSelected.value = true;
  showProcessView.value = false;
  showPerformanceView.value = true;
};
const toggleSidebar = () => {
  isCollapsed.value = !isCollapsed.value;
};
</script>

<style scoped lang="scss">
.process-view {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto; /* 如果内容过多，允许垂直滚动 */
}

$primary-color: wheat;
$hover-background: #524244;


.content {
  overflow: hidden;
  display: flex;
  top:10px;
  width :100%;
  height: 100%;
}
.task-manager {
  position: relative; /* 相对定位 */
  display: flex; /* 使用 Flexbox 布局 */
  flex-direction: column;
   width: 100vw; /* 宽度占满整个视口 */
   overflow: hidden;
}

.sidebar {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  height: 100%; /* 高度占满整个视口 */
  width: 250px; /* 初始宽度 */
  color: white;
  background-color: transparent;
  transition: width 0.3s ease-in-out; /* 过渡效果 */
  flex-shrink: 0; /* 防止侧边栏缩小 */

  &.is-collapsed {
    width: 50px; /* 折叠后的宽度 */
  }
}

.main-content {
  flex-grow: 1; /* 内容区域占据剩余空间 */
  padding: 20px; /* 根据需要调整内边距 */
  background-color: #f5f5f5; /* 内容区域背景色 */
  overflow-y: auto; /* 如果内容过多，允许垂直滚动 */
}
.navigation-icon,.process-navigation,.performance-navigation {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  justify-content: flex-start;
  width :100% ; /* 占据父容器的一半宽度 */
  border-radius: 20px; /* 圆角 */
  transition: background-color 0.3s ease-in-out; /* 过渡效果 */
  &:hover {
    background-color: $hover-background;
    border-radius: 20px;
    cursor: pointer;
  }
  &.selected {
    background-color: $hover-background;
    border-radius: 20px;
    cursor: pointer;

  }
}
.icon-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;

  .process-navigation,
  .navigation-icon,
  .performance-navigation {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }

  .title {
    border-radius: 20px;
    color: $primary-color;
    &:hover,&.selected, &:focus, &:active{
      background-color: $hover-background;
    }
    white-space: nowrap;
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    transition: opacity 0.3s ease-in-out;
  }
}

.toggle-btn,
.process-btn,
.performance-btn {
  background-color: transparent;
  color: $primary-color;
  border: 10px solid transparent;
  flex-shrink: 0;

  &:hover {
    background-color: $hover-background;
    border-radius: 20px;
  }

  &.selected {
    background-color: $hover-background;
    border-radius: 20px;
  }
}


</style>